import React, { useContext } from 'react'
import { Context } from './App'

// export default function Child () {
//   return (
//     <Context.Consumer>
//       {(value) => (
//         <div>
//           <h3>Child: {value.count}</h3>
//           {/* <button onClick={() => changeCount()}>修改爷爷的count</button> */}
//           <button onClick={value.changeCount}>修改爷爷的count</button>
//         </div>
//       )}

//     </Context.Consumer>
//   )
// }

export default function Child ({ count, changeCount }) {
  // !#3 通过 useContext 传递 Context 拿到数据
  // 返回值就是传递过来的数据
  const value = useContext(Context)
  return (
    <div>
      <h3>Child: {value.count}</h3>
      <button onClick={value.changeCount}>修改爷爷的count</button>
    </div>
  )
}